<template>
  <view class="my-userinfo-container">
    <!-- 头像和昵称 -->
    <view class="info-title">
      <view><image class="info-avatar" :src="userinfo.avatarUrl"></image></view>
      <view>
        <text>{{ userinfo.nickName }}</text>
      </view>
    </view>
    <!-- 三个盒子 -->
    <view class="pannel-box">
      <!-- 第一个收藏 -->
      <view class="pannel1">
        <view class="pannel1-item">
          <text>3</text>
          <text>收藏店铺</text>
        </view>
        <view class="pannel1-item">
          <text>17</text>
          <text>收藏商品</text>
        </view>
        <view class="pannel1-item">
          <text>99+</text>
          <text>我的足迹</text>
        </view>
      </view>
      <!-- 第二个订单 -->
      <view class="pannel2">
        <view class="pannel2-title">我的订单</view>
        <view>
          <view class="pannel2-box">
            <uni-badge
              class="uni-badge-left-margin"
              text="2"
              absolute="rightTop"
              size="small"
            >
              <view class="pannel2-item">
                <image class="pannel2-pic" src="@/static/be_pay.png"></image>
                <text>待付款</text>
              </view>
            </uni-badge>
            <uni-badge
              class="uni-badge-left-margin"
              text="99+"
              absolute="rightTop"
              size="small"
            >
              <view class="pannel2-item">
                <image
                  class="pannel2-pic"
                  src="@/static/pending_receipt.png"
                ></image>
                <text>待收货</text>
              </view>
            </uni-badge>
            <view class="pannel2-item">
              <image class="pannel2-pic" src="@/static/refund.png"></image>
              <text>退款/换货</text>
            </view>
            <view class="pannel2-item">
              <image class="pannel2-pic" src="@/static/all_order.png"></image>
              <text>全部订单</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 第三个设置项 -->
      <view class="pannel3">
        <view class="pannel3-item">
          <text>收货地址</text>
          <uni-icons type="forward" size="18"></uni-icons>
        </view>
        <view class="pannel3-item">
          <text>联系客服</text>
          <uni-icons type="forward" size="18"></uni-icons>
        </view>
        <view class="pannel3-item">
          <text>设置</text>
          <uni-icons type="forward" size="18"></uni-icons>
        </view>
      </view>
      <!-- 第四退出 -->
      <view class="pannel4" @click="loginOut">退出登陆</view>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'my-userinfo',
  data() {
    return {}
  },
  computed: {
    ...mapState('user', {
      userinfo: 'userinfo'
    })
  },
  methods: {
    ...mapMutations('user', {
      removeUserInfo: 'removeUserInfo'
    }),
    //退出登陆
    async loginOut() {
      const [err, res] = await uni.showModal({
        title: '提示',
        content: '确认退出登录吗？'
      })
      // confirm	Boolean	为 true 时，表示用户点击了确定按钮
      // cancel	Boolean	为 true 时，表示用户点击了取消
      if (res.confirm) {
        this.removeUserInfo()
      }
    }
  }
}
</script>

<style lang="scss">
.info-title {
  height: 400rpx;
  background-color: #ffdee9;
  background-image: linear-gradient(0deg, #ffdee9 0%, #b5fffc 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .info-avatar {
    width: 80px;
    height: 80px;
    /* padding: 1px; */
    border: 2px solid white;
    border-radius: 50%;
  }
}
.pannel-box {
  position: relative;
  padding: 0px 10px;
  top: -15px;
  .pannel1 {
    display: flex;
    flex: 1;
    justify-content: space-around;
    background-color: white;
    height: 30px;
    // flex-wrap: wrap;
    padding: 10px;
    border-radius: 1px;
    .pannel1-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }
  }
  .pannel2 {
    background-color: white;
    .pannel2-title {
      height: 30px;
      line-height: 30px;
      padding: 5px 0 5px 10px;
      border-bottom: 1px solid #f0f0f0;
      font-size: 14px;
      font-weight: bold;
    }
    .pannel2-box {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 5px 0;
      .pannel2-item {
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .pannel2-pic {
          width: 35px;
          height: 35px;
        }
      }
    }
  }
  .pannel3 {
    background-color: white;
    .pannel3-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 10px;
      text {
        font-size: 13px;
        font-weight: bold;
      }
      &:not(:last-child) {
        border-bottom: 1px solid #f1f1f1;
      }
    }
  }
  .pannel4 {
    background-color: white;
    height: 46px;
    line-height: 46px;
    text-align: center;
  }
  & :not(:last-child) {
    margin-bottom: 5px;
  }
}
</style>
